<template>
    <!-- 统计分析 -->
    <div style="width: 100%">
        <el-row :gutter="20">
            <!-- <el-col :sm="8" :md="6" :lg="lgdata" :xl="3" :style="{ height: cardHeight }">
				<el-card style="height: 100%" class="card">
					<div slot="header">
						<span>统计分析</span>
						<div class="collapse-btn" @click="collapseChage">
							<i v-if="!collapse" class="el-icon-s-fold"></i>
							<i v-else class="el-icon-s-unfold"></i>
						</div>
					</div>
					<el-tree
						:data="menus"
						:props="menusProps"
						accordion
						@node-click="handleNodeClick"
						node-key="code"
						:default-expanded-keys="defaultExpandedKeys"
						:style="{ overflow: 'auto', height: treeHeight }"
					/>
				</el-card>
			</el-col> -->
            <!-- 右上方的页面提示 -->
            <!-- <el-col :sm="16" :md="18" :lg="24 - lgdata" :xl="21" :style="{ height: cardHeight }"> -->
            <!-- <el-col :sm="24" :md="24" :lg="24 - lgdata" :xl="24" :style="{ height: cardHeight }"> -->
                <el-card class="card">
                    <el-row>
                        <router-view></router-view>
                    </el-row>
                </el-card>
            <!-- </el-col> -->
        </el-row>
    </div>
</template>

<script>
import { GetDataClassificationMenus } from '../../api/module/dataClassification/data_classification';
export default {
    data() {
        return {
            collapse: false, //侧边栏初始折叠
            //菜单数据
            // menus: [],
            menus: [
                {
                    children: [],
                    code: '000000',
                    menuName: 'CementingQuality',
                    name: '固井质量查询',
                    parentid: '0000'
                },
                {
                    children: [],
                    code: '000001',
                    menuName: 'CementingQualityPassRate',
                    name: '固井质量合格率查询',
                    parentid: '0000'
                },
                {
                    children: [],
                    code: '000002',
                    menuName: 'AllCementingQualityPassRate',
                    name: '全井固井质量合格率查询',
                    parentid: '0000'
                },
                //  {
                //     children: [],
                //     code: "000003",
                //     menuName: "CementingWorkData",
                //     name: "固井作业数据查询",
                //     parentid: "0000"
                // },
                {
                    children: [],
                    code: '000003',
                    menuName: 'WorkNumberStatistics',
                    name: '作业数量统计',
                    parentid: '0000'
                }
            ],
            //将name（key）的值（value）变为label的值
            menusProps: {
                children: 'children',
                label: 'name'
            },
            defaultExpandedKeys: [],
            treeHeight: '',
            cardHeight: '',
            tableHeight: 0,
            rowStyle: { height: '30px' },
            //子页面的标题
            selectMenu1: {},
            selectMenu2: {
                menuName: ''
            },
            selectMenu1Show: {},
            selectMenu2Show: {
                menuName: ''
            },
            browser: '', //数据浏览页面
            management: '', //数据管理页面
            lgdata: 0 // 5, //页面栅栏大小
        };
    },
    created() {
        this.getWidth();
        window.onresize = () => {
            this.getWidth();
        };
        //获取页面类型
        if (this.$route.query.pageType == 'browser') {
            this.browser = this.$route.query.pageType;
            this.lgdata = 0;
        } else if (this.$route.query.pageType == 'management') {
            this.management = this.$route.query.pageTyp;
        }
    },
    mounted() {
        this.getDataClassificationMenus();
    },
    methods: {
        // 获取宽度
        getWidth() {
            let height = window.innerHeight;
            let width = window.innerWidh;
            this.cardHeight = height + 600 + 'px';
            this.treeHeight = height + 600 + 'px';
            if (width >= 1200) {
                this.tableHeight = height - 130;
            } else {
                this.tableHeight = height - 290;
            }
            this.rowStyle.height = this.tableHeight / 12 + 'px';
        },
        // 侧边栏折叠
        collapseChage() {
            if (this.collapse == false) {
                this.lgdata = 1;
            } else {
                this.lgdata = 5;
            }
            this.collapse = !this.collapse;
        },
        // 获取菜单
        getDataClassificationMenus() {
            this.selectMenu1 = { ...this.menus[0] }; //菜单根
            this.defaultExpandedKeys.push(this.selectMenu1.code);
            this.selectMenu2 = { ...this.menus[0].children[0] }; //根菜单子菜单
            this.selectMenu1Show = this.selectMenu1;
            this.selectMenu2Show = this.selectMenu2;
        },
        // 点击菜单节点
        handleNodeClick(data) {
            if (data.children.length == 0) {
                this.selectMenu2 = { ...data };
            } else {
                this.selectMenu1 = { ...data };
                // console.log(this.selectMenu1);
                this.defaultExpandedKeys[0] = this.selectMenu1.code;
                this.selectMenu2 = {};
            }
            //进行路径的跳转
            let path = '/' + data.menuName;
            // console.log(path)
            // console.log(data)
            //如果为空就不显示
            if (data.menuName == null || data.menuName == '') {
                //渲染一个空页面
            } else {
                this.selectMenu1Show = this.selectMenu1;
                this.selectMenu2Show = this.selectMenu2;
                this.$router.push({
                    path: path,
                    query: {
                        menuName: this.selectMenu2.menuName,
                        tableHeight: this.tableHeight
                    }
                });
            }
        }
    }
};
</script>

<style scoped>
.card >>> .el-card__body {
    padding: 10px;
}
.card >>> .el-card__header {
    font-size: 17px;
    padding: 5px 10px;
    /* padding: 5px 10px !important; */
    height: 40px;
    line-height: 30px;
    background-color: #eef0f6;
}

.collapse-btn {
    float: right;
    cursor: pointer;
    line-height: 30px;
}
.collapse-btn:hover {
    background: rgb(218, 221, 226);
}
/* .card {
	height: 100%;
    overflow: auto;
} */
</style>
